<template>
	<view>
		<view class="logo_img">
			<image src="../../../static/icon/default/ic_launcher.png" mode=""></image>
		  </view>
		  <view class="input_content">
		    <view class="login_phone">
		     <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入手机号"></m-input>
		    </view>
		    <view class="login_phone">
		    <m-input type="password"  v-model="captcha" placeholder="请输入验证码"></m-input>
		    </view>
		  </view>

		  <view @click="getCodeFun" :disabled="disabled" class="id_code">
		    <template v-if="sending">
		      <text>获取验证码</text>
		    </template>
		    <template v-else>
				<text>
					   {{second}}秒后重发
				</text>
		    </template>
		  </view>

		  <view class="login_button">
		    <button @click="login">登&nbsp;&nbsp;录</button>
		  </view>
		  <!--    <view class="agree">-->
		  <!--        <view class="input"><input name="agree" type="radio"/></view>-->
		  <!--        <p>我已阅读并同意<a><span>《用户服务协议及隐私协议》</span></a></p>-->
		  <!--    </view>-->
		  <view class="bottom">
		    <view class="another">
		      <!--            <img src="../../static/img/WeChat.png">-->
		 <navigator url="../login_byPassword/login_byPassword">账号密码登录</navigator>

		    </view>
		  </view>
	</view>
</template>

<script>

	import {
		GET_CAPTCHA,
		LOGIN_BY_CAPTCHA
	} from '@/store/mutation-types.js'

	export default {
		data() {
			return {
				verificationCode: '',
				sending: true,      //是否发送验证码
				disabled: false,   //是否禁发验证码
				second: 60,        //倒计时间
				account:'',
				captcha:''
			}
		},
		onNavigationBarButtonTap() {
		       uni.navigateTo({
		       	url:"../register/register"
		       })
		    }  ,
		methods: {
				getCode() {
					console.log(79865)
					const app = this;
					const phone_number = app.account
					if (phone_number == '' || phone_number == null || phone_number == undefined) {
						app.$toast("手机号不能为空！");
						return;
					}
					this.sending = false;
					this.disabled = true;
					const data = {
						"phoneNumber": phone_number
					}
					const success = function (result) {
						console.log(result)
						if (result.error == "0") {
							app.$toast("已发送验证码！");
							app.verificationCode = result.data.code;
							console.log('登录成功');
							console.log(result.data)
							console.log("login___________________________")
							app.timeDown();
						} else {
							app.$toast(result.error);
						}
					};
					console.log(data)
					this.$store.dispatch(`user/${GET_CAPTCHA}`,{
						data,
						onSuccess:success
					})
				},
				login() {
					const app = this;
					const phone_number = app.account
					const verificationCode = app.captcha
					if (phone_number == '' || phone_number == null || phone_number == undefined) {
						app.$toast("手机号不能为空！");
						return;
					}
					if (verificationCode == '' || verificationCode == null || verificationCode == undefined) {
						app.$toast("验证码不能为空！");
						return;
					}
					const data = {
						"phoneNumber": phone_number,
						"verificationCode": verificationCode
					}
					const success = function (result) {
						if (result.error == "0") {
							app.$toast("登录成功！");
							uni.setStorageSync("user", JSON.stringify(result.data));
							uni.setStorageSync("token", result.token);
							uni.switchTab({
								url:`/pages/blog/blog`
							})

						} else {
							app.$toast(result.error);
						}
					};
					console.log(data)
					this.$store.dispatch(`user/${LOGIN_BY_CAPTCHA}`,{
						data,
						onSuccess:success
					})
				},
				getCodeFun() {
					//his.sending原为true,请求成功，!this.sending == true，主要是防止有人把disabled属性去掉，多次点击；
					if (!this.sending)
						return;

					this.getCode();
				},
				timeDown() {
					let result = setInterval(() => {
						--this.second;
						if (this.second < 0) {
							clearInterval(result);
							this.sending = true;
							this.disabled = false;
							this.second = 60;
						}
					}, 1000);

				}
		}
	}
</script>

<style>

.mint-header {
    padding: 10px 0;
    height: 3.5rem;
}

.mint-header-title {
    font-weight: bolder;
    font-size: 1.2rem;
    /*font-family: 微软雅黑;*/
}

.mint-header-button.is-left {
    text-align: center;
}

.logo_img {
    text-align: center;
    padding: 76.92rpx 0;

}

.logo_img image {
    height: 125rpx;
	width: 125rpx;
}

.input_content {
    margin: 0.5rem auto 0;
    background: #f4f4f4;
    width: 80%;
    border-radius: 1rem;
}

.input_content .login_phone {
    border-bottom: 1px solid #aaaaaa;
    height:120rpx;
    line-height: 91.34rpx;
    background: #fff;
}

.input_content .login_phone img {
    height: 2.2rem;
    width: 2rem;
    padding: 0.65rem 1rem;
    float: left;
}

.input_content .login_phone input {
    -web-kit-appearance: none;
    -moz-appearance: none;
    font-size: 18px;
    height: 120rpx;
    border: none;
    color: #6a6f77;
    width: 100%;
}

.input_content .login_identify {
    /*border-bottom: 1px solid #aaaaaa;*/
    height: 3.5rem;
    border-radius: 0 0 1rem 1rem;
    line-height: 3.5rem;
}

.input_content .login_identify img {
    height: 2.2rem;
    width: 2rem;
    padding: 0.65rem 1rem;
    float: left;
}

.input_content .login_identify input {
    -web-kit-appearance: none;
    -moz-appearance: none;
    font-size: 1.1rem;
    height: 2em;
    border: none;
    color: #6a6f77;
    background: #f4f4f4;
}

.get_identify button {
    float: right;
    margin-right: 3rem;
    color: #ff5a48;
    font-size: 0.9rem;
    background-color: Transparent;
    border: none;
    outline: none;
}

.login_button {
    margin-top: 3rem;
    text-align: center;
}

.login_button button {
    background: #ff5a48;
    width: 520rpx;
    height: 100rpx;
    text-align: center;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
}

.agree {
    padding: 2rem 0;
    margin-left: 17%;
    display: flex;
}

.agree .input {
    flex: 0.01;
}

.agree p {
    margin-top: 0.1rem;
    font-size: 0.8em;
    color: #6a6f77;
    flex: 1;
}

.agree p span {
    color: #ff9800;
}

.line {
    /*padding: 0rem auto;*/
    display: flex;
    text-align: center;
    /*position: fixed;*/
    /*bottom: 3rem;*/
}

.line .one_hr {
    /*height: 0.1rem;*/
    margin-top: 1rem;
    margin-left: 1rem;
    flex: 0.8;
}

.line .font {
    flex: 1;
}

.line .two_hr {
    /*height: 0.1rem;*/
    margin-top: 1rem;
    margin-right: 1rem;
    flex: 0.8;
}

.another {
    margin-bottom: 2rem;
    margin-top: 0.5rem;
    text-align: right;
    margin-right: 10%;
}

.another img {
    width: 2rem;
    height: 2rem;
    float: left;
    margin-left: 30%;
}

.another uni-navigator {

    color: #ff5a48;
   font-size: 18px;
    margin-top: 0.2rem;
	padding: 0.5rem;
}

.bottom {
    width: 100%;
    bottom: 0rem;
    left: 0rem;
}

.id_code{
    color: #ff5a48;
    float: right;
    margin-right: 10%;
    padding: .5rem;
    border: none;
	font-size: 18px;
}

</style>
